@extends(config('admin.systems.layout_blade'))

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">菜单列表</h3>

                    <div class="box-tools pull-right">
                        <div class="has-feedback">
                            <input type="text" class="form-control input-sm" placeholder="Search Mail">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                    </div>
                    <!-- /.box-tools -->
                </div>

                <!-- /.box-header -->
                <div class="box-body">
                    <div class="mailbox-controls">
                        <!-- Check all button -->

                        <div class="btn-group">
                            @role('developer')
                            <button type="button" class="btn btn-danger btn-sm ajax-post confirm" data-url="{{ get_admin_url('menu/delete') }}" data-target-form="ids" data-prompt-information="确定要删除选中的数据吗？"><i class="fa fa-trash-o"></i></button>
                            @endrole
                            <button type="button" class="btn btn-default btn-sm" title="上一步" onclick="window.history.go(-1);"><i class="fa fa-reply"></i></button>
                            <button type="button" class="btn btn-default btn-sm" title="下一步" onclick="window.history.forward()"><i class="fa fa-share"></i></button>
                        </div>

                        @role('developer')
                        <a href="{{ get_admin_url('menu/edit', ['pid'=>$pid, 'id'=>0]) }}" class="btn btn-success btn-sm checkbox-toggle"  data-toggle="modal" data-target="#edit-modal"><i class="fa fa-plus"></i></a>
                        @endrole

                        <!-- /.btn-group -->
                        <button type="button" class="btn btn-primary btn-sm" onclick="window.location.reload();"><i class="fa fa-refresh"></i></button>

                        <button class="btn btn-primary btn-sm" onclick="jQuery('#menu-tree').treetable('expandAll'); return false;">展开</button>

                        <button class="btn btn-primary btn-sm" onclick="jQuery('#menu-tree').treetable('collapseAll'); return false;">关闭</button>
                    </div>

                    <table class="table table-bordered" id="menu-tree">
                        <tr >
                            <th style="width: 120px"><input type="checkbox" name="ids" value="0" class="check-all"></th>
                            <th>菜单编号</th>
                            <th>菜单名称</th>
                            <th>菜单类型</th>
                            <th>菜单地址</th>
                            <th>对应的权限名称</th>
                            <th>菜单描述</th>
                            <th style="width: 160px;">操作</th>
                        </tr>
                        @foreach ($data as $key=>$value)

                            <tr data-tt-id="{{ $value->id }}" @if ($value->pid) data-tt-parent-id="{{ $value->pid }}" @endif>
                                <td>
                                    <input type="checkbox" name="ids[]" class="ids" value="{{ $value->id }}">
                                </td>
                                <td>{{ $value->id }}</td>
                                <td>{{ $value->name }}</td>
                                <td>{{ $value->menu_type }}</td>
                                <td>{{ $value->url }}</td>
                                <td>{{ $value->slug }}</td>
                                <td>{{ $value->description }}</td>
                                <td>
                                    @role('developer')
                                    <a href="{{ get_admin_url('menu/edit', ['pid'=>$value->id]) }}" class="btn btn-success btn-sm" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-plus"></i></a>
                                    <a href="{{ get_admin_url('menu/edit', ['pid'=>$value->pid, 'id'=>$value->id]) }}" class="btn btn-success btn-sm" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit"></i></a>
                                    <a href="{{ get_admin_url('menu/delete', ['ids'=>$value->id]) }}" class="btn btn-danger btn-sm ajax-get confirm" data-prompt-information="确定要删除（{{ $value->name }}）该菜单吗？"><i class="fa fa-trash-o"></i></a>
                                    @endrole
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>

            </div>
            <!-- /.box -->
        </div>
    </div>
@endsection
@section('style')
    <link rel="stylesheet" href="{{ asset('/plugins/jsTree/css/jquery.treetable.css') }}">
    <link rel="stylesheet" href="{{ asset('/plugins/jsTree/css/jquery.treetable.theme.default.css') }}">
@endsection

@section('script')
    <script src="{{ asset('/plugins/jsTree/jquery.treetable.js') }}"></script>
    <script>
        $("#menu-tree").treetable({
//        expandLevel : 5
            expandable: true,
        });

        $("#menu-tree").on("mousedown", "tr", function() {
            $(".selected").not(this).removeClass("selected");
            $(this).toggleClass("selected");
        });

    </script>
@endsection